import React, { useEffect, useState } from 'react';
import '../../styles/liu/setPending.scss'
import { Button, Form, Input, Select, DatePicker, Table } from 'antd';
import { getSetPendingList } from '../../api/liu/index'
import Header from '../../components/liu/header'
import {NavLink, useNavigate} from 'react-router-dom'
interface Props {

}
function SignPending(props: Props) {
    var navigate = useNavigate()
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    const [data, setData] = useState([])
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    var [pagination,setPagination] = useState({ current:1,pageSize:10,total:100});
    //初始化加载
    useEffect(() => {
        getSetPendingList().then((res: any) => {
            setData(res.data)
        })
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {

    };
    //点击搜索
    const onSearch = (value: string) => {
        getSetPendingList().then((res: any) => {
            var arr = res.data.filter((item:any)=>{
                return item.name.indexOf(value)!=-1
            })
            setData(arr)
        })
    };
    //表格列数据
    const columns: any = [
        { title: '编号', dataIndex: 'id', },
        { title: '签约人姓名', dataIndex: 'name', },
        {title: '身份证号',dataIndex: 'id-num',},
        {title: '手机号码',dataIndex: 'phone',},
        {title: '签约状态',
        dataIndex: 'isSign',
        render:(isSign:string)=><span style={{color:isSign==="待支付"?"#FDDB78":''||isSign==="已驳回"?"#FA746B":""||isSign==="待审核"?"#3DD4A7":""}}>{isSign}</span>
    },
        {title: '签约医生团队',dataIndex: 'doctorTeam',},
        {title: '最后修改时间',dataIndex: 'date',},
        {title: '操作',
            render: (id:any) => {
                return (<>
                <NavLink to="/index/sign-detail" state={id}>查看详情</NavLink>
                <NavLink to="/index/sign-edit" state={id}>编辑</NavLink>
                </>)
            }
        },
    ];
    const onSelectChange = (newSelectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi:any)=>{
        setPagination(pagi) //更新页码
    }
    return (
        <div className='signPending'>
            <div className="main">
                <Header txt="待处理签约"></Header>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >

                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="签约状态"
                                    name="state"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">待审核</Option>
                                        <Option value="待支付">待支付</Option>
                                        <Option value="已驳回">已驳回</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="签约机构"
                                    name="organization"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">罗西社区服务中心</Option>
                                        <Option value="待支付">天明社区服务中心</Option>
                                        <Option value="已驳回">民进社区服务中心</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="医生团队"
                                    name="doctor"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">王皓团队</Option>
                                        <Option value="待支付">胡曼团队</Option>
                                        <Option value="已驳回">李维团队</Option>
                                    </Select>
                                </Form.Item>
                            </div>

                            <Button>导出</Button>
                        </div>


                        <div className='input-line'>
                            <div>
                                <Form.Item
                                    label="服务包"
                                    name="server"
                                >
                                    <Select
                                        defaultValue={"请选择"}
                                        allowClear
                                    >
                                        <Option value="">请选择</Option>
                                        <Option value="待审核">基础包</Option>
                                        <Option value="待支付">老年人服务包</Option>
                                        <Option value="已驳回">慢性病护理包</Option>
                                    </Select>
                                </Form.Item>

                                <Form.Item
                                    label="选择日期"
                                    name="date"
                                    className='date'
                                >
                                    <RangePicker placeholder={["开始日期", "结束日期"]} />
                                </Form.Item>
                            </div>

                            <Search placeholder="请输入关键字" onSearch={onSearch} enterButton />
                        </div>
                    </Form>

                </div>

                <div className="table">
                    <Table columns={columns} dataSource={data} rowSelection={rowSelection} pagination={pagination}  onChange={(pagi)=>{handleChange(pagi)}}/>
                </div>
            </div>

        </div>
    );
}

export default SignPending;